<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">添加废弃物</small>
      </a>
      <a href="javascript:;" class="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
    </header>
    <main>
  
      <div class="formcontent">
        <ul>
          <li>
            <span>处置日期</span>
            <div class="froms">
              <el-input
                placeholder="请选择日期"
                icon="date"
                :disabled="true"
                v-model="formName.dataValue"
                @click="OutTimeopenPickerdDate()">
              </el-input>
              <mt-datetime-picker ref="OutTimepicker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="OutTimepickerValue" @cancel="OutTimehandleCanceDate" @confirm="OutTimehandleConfirmDate"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span>处置时间</span>
            <div class="froms">
             <el-input
                placeholder="请选择日期"
                icon="time"
                :disabled="true"
                v-model="formName.startdataValue"
                @click="openPickerStart()">
              </el-input>
              <mt-datetime-picker v-model="startvalue1"  ref="picker1" type="time" @cancel="handleCancelStart" @confirm="handleConfirmStart"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span>种类</span>
            <div class="froms">
              <input type="text" v-model="formName.kind">
            </div>
          </li>
          <li>
            <span>数量</span>
            <div class="froms">
              <input type="text" v-model="formName.num">
            </div>
          </li>
          <li>
            <span>登记日期</span>
            <div class="froms">
              <el-input
                placeholder="请选择日期"
                icon="date"
                :disabled="true"
                v-model="formName.AbandonDate"
                @click="AbandonDateopenPickerdDate()">
              </el-input>
              <mt-datetime-picker ref="AbandonDatepicker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日"  v-model="AbandonDatepickerValue" @cancel="AbandonDatehandleCanceDate" @confirm="AbandonDatehandleConfirmDate"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span>登记时间</span>
            <div class="froms">
              <el-input
                placeholder="请选择日期"
                icon="time"
                :disabled="true"
                v-model="formName.enddataValue"
                @click="openPickerEnd()">
              </el-input>
              <mt-datetime-picker v-model="startvalue2" :startHour="startHour2" :endHour="endHour2" ref="picker2" type="time" @cancel="handleCancelEnd" @confirm="handleConfirmEnd"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span>  <em>*</em>处置人</span>
            <div class="froms">
              <input type="button" class="text_l"  @click="handleClick" v-model="msg">
              <mt-popup v-model="popupVisible" position="right" modal=false class="mint-popup-3">
                <header class="head">
                  <a class="back tl" @click="clickmodl">
                    <i class="el-icon-arrow-left"></i>
                  </a>
                  <a href="javascript:;" class="tc">
                    <small class="font_18 co_f">人员档案</small>
                  </a>
                </header>
                <main>
                  <div class="seachfrom">
                    <div class="seachbox">
                      <el-input placeholder="请输入内容" v-model="seachtext">
                        <el-button slot="append" icon="search"></el-button>
                      </el-input>
                    </div>
                  </div>
                  <div>
                    <ul class="datalist">
                      <li v-for='(item,index) of getPerson' :key='item.unid'>
                        <a :data-name="item.name" :data-unid="item.unid" @click="peopleClick(item.unid,item.name)">
                                姓名:{{item.name}}
                              </a>
                      </li>
                    </ul>
                  </div>
                </main>
              </mt-popup>
            
            </div>
          </li>
          <li>
            <span>去向</span>
            <div class="froms">
              <input type="text" v-model="formName.whereabouts">
            </div>
          </li>
        </ul>
      </div>
  
    </main>
  </div>
</template>

<script>
  import {
    AbandonStandingAdd 
  } from '../../api/api';
  import {
    Popup
  } from 'mint-ui';
  import {
    InstitutionPerson
  } from '../../api/api';
  import {
    DatetimePicker
  } from 'mint-ui';
  var moment = require('moment');
  export default {
    name: 'add_mrcj',
    components: {
      'mt-popup': Popup,
      'mt-datetime-picker': DatetimePicker,
    },
    data() {
      return {
        msg: '请选择人员',
        getNowFormatDate: null,
        CriteriaList: [],
        //时间
        AbandonDatepickerValue:moment().format('YYYY-MM-DD'),
        OutTimepickerValue:moment().format('YYYY-MM-DD'),
        formName: {
          dataValue: '',
          AbandonDate: '',
          startdataValue: '',
          enddataValue: '',
          kind:'',
          num:'',
          whereabouts:''
        },
        value: '',
        //组件
        seachtext: '',
        popupVisible: false,
        closeOnClickModal: false,
        getPerson: [],
        Enterprise: {},
        PageSize: 10,
        institutionPersonname: '',
        institutionPersonunid: '',
      };
    },
  
    methods: {
      //获取处置日期
      OutTimeopenPickerdDate() {
        this.$refs.OutTimepicker.open();
      },
      OutTimehandleCanceDate() {
        let _this = this
        _this.OutTimepickerValue = _this.formName.dataValue
      },
      OutTimehandleConfirmDate(val) {
        let _this = this
      //  _this.formName.dataValue = moment(val).format('YYYY-MM-DD hh:mm:ss')
       _this.formName.dataValue = moment(val).format('YYYY-MM-DD')
      },
      //获取登记日期
      AbandonDateopenPickerdDate() {
        this.$refs.AbandonDatepicker.open();
      },
      AbandonDatehandleCanceDate() {
        let _this = this
        _this.AbandonDatepickerValue = _this.formName.AbandonDate
      },
      AbandonDatehandleConfirmDate(val) {
        let _this = this
       // _this.formName.AbandonDate = moment(val).format('YYYY-MM-DD hh:mm:ss')
        _this.formName.AbandonDate = moment(val).format('YYYY-MM-DD') 
      },
      //获取开始时间&&结束时间
      openPickerStart() {
        let _this = this
        if (_this.startvalue2) {
          let a = _this.startvalue2.split(':')
          _this.endHour1 = a[0] - 0
        }
        _this.$refs.picker1.open()
        setTimeout(() => {
          let vmodal = document.getElementsByClassName('v-modal')[0]
          vmodal.onclick = function() {
            _this.handleCancelStart()
          }
        }, 10)
      },
      openPickerEnd() {
        let _this = this
        if (_this.startvalue1) {
          let a = _this.startvalue1.split(':')
          _this.startHour2 = a[0] - 0
        }
        _this.$refs.picker2.open()
        setTimeout(() => {
          let vmodal = document.getElementsByClassName('v-modal')[0]
          vmodal.onclick = function() {
            _this.handleCancelEnd()
          }
        }, 10)
      },
      // 取消按钮 --- 把选择器绑定的velue恢复为输入框的dataValue
      handleCancelStart() {
        let _this = this
        _this.startvalue1 = _this.formName.startdataValue
      },
      handleCancelEnd() {
        let _this = this
        _this.startvalue2 = _this.formName.enddataValue
      },
      // 确定按钮 --- 判断该时间是否可选，若可选则把值赋给输入框的dataValue
      handleConfirmStart(val) {
        let _this = this
        _this.formName.startdataValue = val
      },
      handleConfirmEnd(val) {
        let _this = this
        _this.formName.enddataValue = val
      },
  
      //处置人弹窗
      handleClick: function() {
        this.popupVisible = true
        this.getInstitutionPerson();
      },
      clickmodl: function() {
        this.popupVisible = false
      },
      //获取item
      peopleClick: function(unid, name) {
        this.institutionPersonname = name;
        this.institutionPersonunid = unid;
        this.clickmodl();
        this.msg = this.institutionPersonname
      },
      //获取组件institutionPerson的数据
      getInstitutionPerson: function() {
        let varQueryData = {
          PageSize: this.PageSize,
          CurrentPage: 1,
          Query: {
            CriteriaList: this.CriteriaList
          }
        }
        let query = {
          Name: 'Enterprise.Unid', //Enterprise.Unid
          Value: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
          Operate: "Equal",
          DataType: null,
          EndSuffix: "",
          Suffix: null
        }
        varQueryData.Query.CriteriaList.push(query) //往数组里面添加对象
        let options = {
          params: {
            UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
            QueryData: JSON.stringify(varQueryData),
            //Enterprise.Unid:,
          }
        }
        //调取接口
        InstitutionPerson(options).then((res) => {
          if (res.success === true) {
            this.user = res.data.user;
            this.getPerson = res.data;
          }
        })
      },
  
  
      //提交方法
      submitForm: function() {
        let a=this.formName.startdataValue.split(":")
        let b=this.formName.enddataValue.split(":")
        let varQueryData = {
          //Name: this.institutionPersonname,
          Unid: this.institutionPersonunid,
        }
        let varEnterpriseUnid = {
          Unid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
          Name: JSON.parse(localStorage.getItem('auth')).enterpriseName,
        }
        let data = {
          OutTime: moment(this.formName.dataValue).format('YYYY-MM-DD 00:00:00'),
          StartHour:a[0],
          StartMin:a[1],
          Kind:this.formName.kind,
          Num:this.formName.num,
          AbandonDate:moment(this.formName.abandonDate).format('YYYY-MM-DD 00:00:00'),
          EndHour:b[0],
          EndMin:b[1],
          Whereabouts:this.formName.whereabouts,
          EnterprisePerson: varQueryData,
          Enterprise:varEnterpriseUnid,
        }
        let dataoption = {
          params: {
            Data: JSON.stringify(data),
            UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
          }
        }
        //调取接口
        AbandonStandingAdd(dataoption).then((res) => {
          if (res.success === true) {
            this.$message.success('保存成功');
            this.$router.go(-1);
          } else {
            this.$message.error(res.msg);
          }
        }).catch(function() {
          this.$message.error('网络异常。');
        })
  
      },
      created() {
  
      },
      //页面加载时候
      mounted() {
        this.getInstitutionPerson();
      }
  
    }
  }
</script>

<style lang="scss">
 
</style>
